<template>
	<view>
		<button @click="onclick">压缩</button>
		<view v-if="beforeUrl">
			<view>
				<text>之前:{{beforeSize}}</text>
			</view>
			<image class="img" mode="widthFix" :src="beforeUrl"></image>
		</view>
		<view v-if="afterUrl">
			<view>
				<text>之后:{{afterSize}}</text>
			</view>
			<image class="img" mode="widthFix" :src="afterUrl"></image>
		</view>
	</view>
</template>
<script>
	import { compressImage } from '@/uni_modules/lime-shrink';
	export default {
		data() {
			return {
				beforeUrl: '',
				beforeSize: 0,
				afterUrl: '',
				afterSize: 0,
			}
		},
		
		methods: {
			onclick() {
				uni.chooseImage({
					success: (res) => {
						const file = res.tempFiles[0];
						this.beforeUrl = res.tempFilePaths[0]
						compressImage({
							quality: 80,
							// compressedWidth: 500,
							// #ifndef WEB
							src: res.tempFilePaths[0],
							// #endif
							// #ifdef WEB
							src: file,
							// #endif
							success: (res2) => {
								this.afterUrl = res2.tempFilePath;
								uni.getFileInfo({
									filePath: res.tempFilePaths[0],
									success: (res) => {
										this.beforeSize = res.size
										console.log('压缩前', res.size)
									}
								})
								uni.getFileInfo({
									filePath: res2.tempFilePath,
									success: (res) => {
										this.afterSize = res.size
										console.log('压缩后', res.size)
									}
								})
							}
						})
					}
				})
			}
		}
	}
</script>
<style>
	.img {
		width: 500rpx;
	}
</style>